<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>账户查询</span>
      <div>
        <el-button
          type="primary"
          v-if="userinfo.rolesId == '5' || userinfo.rolesId == '1' || userinfo.rolesId == '8'"
          @click="bindMerchNo()"
          >绑定账户</el-button>
        <el-button
          type="primary"
          v-if="userinfo.rolesId == '1' || userinfo.rolesId == '8'"
          @click="ActivateElectronics()"
          >开通电子子账户</el-button>
        <el-button
          type="primary"
          v-if="userinfo.rolesId == '5'"
          @click="addAccount()"
          >创建账户</el-button
        >
      </div>
    </div>
    <div class="container">
      <div class="screeningBox">
        <div class="leftBox">
           <div class="leftitem">
            <div class="block">
              <el-date-picker
                v-model="date"
                type="datetimerange"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :clearable="false"
                :default-time="['00:00:00', '23:59:59']"
              >
              </el-date-picker>
              <el-select
                v-model="CardBindingStatusvalue"
                placeholder="绑卡状态"
              >
                <el-option
                  v-for="item in CardBindingStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
            <div class="leftitem">
            <el-input
              v-model="phoneNumber"
              placeholder="手机号"
              style="width: 250px"
            ></el-input>
            <el-input
              v-model="mailboxNumber"
              placeholder="邮箱"
              style="width: 250px"
            ></el-input>
          </div>
        </div>
        <div class="">
          <div class="rightitem" v-if="userinfo.rolesId == 1 || userinfo.rolesId == 8 || userinfo.rolesId == 9 || userinfo.rolesId == 9 || userinfo.rolesId != 5">
            <el-form ref="conditions" :model="conditions">
              <el-select
                v-if="
                  userinfo.rolesId == 1 ||
                  userinfo.rolesId == 8 ||
                  userinfo.rolesId == 9
                "
                class="servicelevel"
                v-model="conditions.servicelevel"
                placeholder="服务商级别"
                @change="servicelevel"
              >
                <el-option keys="1" label="一级服务商" :value="1"></el-option>
                <el-option keys="2" label="二级服务商" :value="2"></el-option>
              </el-select>
              <el-autocomplete
                v-if="
                  userinfo.rolesId == 1 ||
                  userinfo.rolesId == 8 ||
                  userinfo.rolesId == 2 ||
                  userinfo.rolesId == 9
                "
                class="servicename"
                v-model.trim="conditions.servicename"
                :fetch-suggestions="querySearch"
                placeholder="服务商名称"
                @select="serviceid"
              ></el-autocomplete>
              <el-autocomplete
                v-if="userinfo.rolesId != 5"
                class="BDname"
                v-model.trim="conditions.BDname"
                :fetch-suggestions="BDname"
                placeholder="业务经理"
                @select="BDid"
              ></el-autocomplete>
            </el-form>
          </div>
          <div class="rightitem">
            <el-input
              v-model="ElectronicInquiryMerId"
              placeholder="商户号/商户名称"
              style="width: 250px"
            ></el-input>
            <el-input
              v-model="memKeyWords"
              placeholder="账户号/会员号"
              style="width: 250px"
            ></el-input>
          </div>

          <div class="rightitem" style="display: flex">
            <el-select
              v-if="userinfo.rolesId != 5 && userinfo.rolesId != 6"
              v-model="channelId"
              placeholder="通道类型"
            >
              <el-option
                v-for="(item, index) in huifuChannelslist"
                :key="index"
                :label="item.channelname"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-input
              v-model="channelAcctNo"
              placeholder="渠道商户号"
              style="width: 250px"
            ></el-input>
          </div>
        
          <div class="rightitem">
            <el-button icon="el-icon-search" type="primary" @click="soso"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" type="primary" @click="reset"
              >重置</el-button
            >
          </div>
        </div>
      </div>
      <div class="statistical">
        <div class="statisticalitem">
          <div>总商户数</div>
          <div>
            <span class="red">{{ merchantsinfo.total }}</span> 家
          </div>
        </div>
        <div class="statisticalitem">
          <div>动销商户数</div>
          <div>
            <span class="red">{{ merchantsinfo.active }}</span> 家
          </div>
        </div>
      </div>
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="merchantarr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            align="center"
            type="index"
            label="序号"
          ></el-table-column>
          <el-table-column
            label="商户名称?商户号"
            align="center"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.memberName }}</div>
              <div>{{ scope.row.mchNo }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="channelName"
            label="通道名称"
            align="center"
          ></el-table-column>
          <el-table-column
            label="账户名称?账户号"
            align="center"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.memberName }}</div>
              <div>
                {{ scope.row.memberNo }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="账户类型?渠道商户号"
            align="center"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.memberType === 1 ? "普通账户" : "商户账户" }}</div>
              <div>
                {{ scope.row.channelAcctNo }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="账户余额?可提现金额"
            align="center"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.trsTotalBalance }}</div>
              <div>
                {{ scope.row.trsAvailableBalance}}
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="trsStatus"
            label="绑卡状态"
            align="center"
          ></el-table-column> -->
          <el-table-column
            :render-header="renderheader"
            label="状态"
            align="center"
          >
         <template slot-scope="scope">
              <div>
                <span v-if="scope.row.trsStatus == '已绑定'" class="green">{{ scope.row.trsStatus }}</span>
                <span v-else class="hui">{{ scope.row.trsStatus }}</span>
              </div>
          </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
          ></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="180"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
              v-if="!scope.row.pid && userinfo.rolesId == '5'"
                type="text"
                @click="balancePaymentDialog(scope.row)"
                >余额支付</el-button>
              <el-button
                type="text"
                @click="joinmerchantsinfo(scope.row)"
                >详情</el-button>
                <el-button
                type="text"
                v-if="scope.row.channelType == 16 && userinfo.rolesId == '5' && scope.row.pid"
                @click="editInfo(scope.row)"
                >编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="combined"
            :current-page.sync="cur_page"
          ></el-pagination>
        </div>
      </div>
      <br />
      <br />
      <!-- 提现 -->
      <el-dialog
        v-dialogDrag
        title="提现"
        :visible.sync="WithdrawalFormVisible"
        width="35%"
        :close-on-click-modal="false"
      >
        <div class="widthFrom">
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle">提现账户名称:</span
            ><span class="widthdralValueStyle">4756378675327</span>
          </div>
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle">账号:</span
            ><span class="widthdralValueStyle">75367537</span>
          </div>
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle">可提现余额:</span
            ><span class="widthdralValueStyle">7867885</span>
          </div>
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle WithdrawalWordStyle2"
              >提现金额:</span
            ><el-input
              placeholder="请输入提现金额"
              v-model="WithdrawalBalance"
              style="width: 300px"
            >
            </el-input>
          </div>
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle WithdrawalWordStyle2"
              >服务密码:</span
            >
            <el-input
              placeholder="请输入服务密码"
              v-model="WithdrawalBalance"
              style="width: 300px"
            >
            </el-input>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="amend = false">取消</el-button>
          <el-button type="primary" @click="terminalupdateok">确定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="余额支付"
        :visible.sync="balancePaymentVisible"
        width="700px"
        :close-on-click-modal="false"
      >
      <el-card >
      <el-form :model="paymentForm" :rules="paymentFormRules" ref="paymentFormRules"  >
        <el-form-item label-width="120px" label="支付金额：" prop="ord_amt">
              <el-input  @blur="ordAmtBlur" style="width: 420px;" v-model="paymentForm.ord_amt" placeholder="请输入支付金额" clearable  > 
                <template slot="append">账户余额：{{ trsTotalBalance }}</template>
              </el-input>
            </el-form-item>
            <el-form-item label-width="120px" label="支付原因：" prop="risk_check_data.transfer_type">
              <el-select style="width: 420px;" v-model="paymentForm.risk_check_data.transfer_type" clearable placeholder="请选择支付原因">
                  <el-option :label="item.label" :value="item.value" v-for="item in causeList" :key="item.value"/>
               </el-select>
            </el-form-item>
              <el-form-item label-width="120px" label="手续费承担方" prop="trans_fee_take_flag">
                <el-radio-group v-model="paymentForm.trans_fee_take_flag">
                  <el-radio label="OUT">出款方</el-radio>
                  <el-radio label="IN">分账接受方</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label-width="120px" label="服务密码：" prop="servicePassword">
              <el-input  @blur="ordAmtBlur" style="width: 420px;" v-model="paymentForm.servicePassword" placeholder="请输入服务密码" clearable  /> 
            </el-form-item>
            <el-form-item label-width="120px" label="备注：">
              <el-input style="width: 420px;"  v-model="paymentForm.remark" placeholder="请输入备注" clearable  />
            </el-form-item>

            <el-form-item prop="acct_split_bunch.acct_infos">
            <div style="margin-bottom: 20px;display: flex;justify-content: space-between;align-items: center;">
              <p> <el-switch
                   v-model="paymentForm.acct_split_bunch.percentage_flag"
                   active-color="#13ce66"
                   inactive-color="#409eff"
                   active-value="Y"
                   inactive-value="N"
                   active-text="百分比分账"
                   inactive-text="自定义金额分账"
                   >
                 </el-switch> </p>
              <el-button type="primary" size="small" @click="addPaymentTableClcik">新增分账商户</el-button>
            </div>
            <el-table
          :data="paymentForm.acct_split_bunch.acct_infos"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          max-height="350"
          :header-cell-style="tableHeaderColor"
        >
        <el-table-column  prop="templateVersion"  width="300"  align="center" label="分账金额" >
          <template slot-scope="scope">
              <el-input @blur="divAmtBlur($event,scope.$index)" v-if="paymentForm.acct_split_bunch.percentage_flag == 'N'" v-model="scope.row.div_amt" placeholder="请输入分账金额" clearable class="selWidth" size="small" />
              <el-input @blur="divAmtBlur($event,scope.$index)" v-if="paymentForm.acct_split_bunch.percentage_flag == 'Y'" v-model="scope.row.percentage_div" placeholder="请输入分账百分比" clearable class="selWidth" size="small" >
                <template slot="append">
                  <div style="width: 70px;">
                    <p>{{ (scope.row.percentage_div  / 100 * paymentForm.ord_amt || 0.00).toFixed(2) }} 元</p>
                  </div>
                </template>
              </el-input>
            </template>
        </el-table-column>
        <el-table-column  prop="huifu_id" align="center" label="接收方"  >
          <template slot-scope="scope">
            <el-select filterable class="huifu-select"  v-model="scope.row.huifu_id" clearable placeholder="请选择接收方">
                  <el-option :label="item.memberName" :value="item.channelAcctNo" v-for="item in receiverList" :key="item.channelAcctNo" /> 
               </el-select>
            </template>
        </el-table-column>
        <el-table-column align="center"  width="100" label="操作"  >
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.$index != 0 || paymentForm.acct_split_bunch.acct_infos.length >1" @click="paymentdeletClick(scope.$index) ">删除</el-button>
            <!-- <el-button type="text" v-if="scope.$index == (paymentTable.length - 1)">新增</el-button> -->
            </template>
        </el-table-column>
      </el-table>
    </el-form-item>
      </el-form>
    </el-card>
      <span slot="footer" class="dialog-footer">
          <el-button @click="balancePaymentVisible = false">取消</el-button>
          <el-button type="primary" @click="balancePaymentSuer">确定</el-button>
        </span>
    </el-dialog>
      <!-- 账户绑定 -->
      <el-dialog
        v-dialogDrag
        title="账户绑定"
        :visible.sync="bindMerchNoVisible"
        width="400px"
        :close-on-click-modal="false"
      >
      <el-form label-position="top" :model="bindUserForm" :rules="bindUserFormRules" ref="bindUserForm">
          <el-form-item label="乐收赢商户号" prop="mch_no"  style="width: 100%;">
            <el-input :disabled="userinfo.rolesId == '5'" v-model="bindUserForm.mch_no" placeholder="请输入乐收赢商户号" clearable  />
          </el-form-item>
          <el-form-item label="渠道商户号" prop="huifu_id"  style="width: 100%;">
            <el-input v-model="bindUserForm.huifu_id" placeholder="请输入渠道商户号" clearable  />
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="bindMerchNoVisible = false">取消</el-button>
          <el-button type="primary" @click="bindMerchNoClick">确定</el-button>
        </span>
    </el-dialog>
      <!-- 开通电子子账户-->
      <el-dialog
        v-dialogDrag
        title="开户填写"
        :visible.sync="ActivateElectronicsFormVisible"
        width="45%"
        :close-on-click-modal="false"
      >
        <div class="widthFrom">
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle">乐收赢商户号:</span
            ><el-input v-model="mchNo" placeholder="请输入内容"></el-input>
          </div>
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle">会员编号:</span
            ><el-input v-model="memberNo" placeholder="请输入内容"></el-input>
          </div>
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle4">提现手续费比例:</span
            ><el-input
              class="WithdrawalWordStyle3"
              v-model="withRate"
              type="number"
              placeholder="请输入内容"
            ></el-input
            >%
          </div>
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle">提现单笔手续费:</span
            ><el-input
              v-model="withPer"
              type="number"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle1">会员类型:</span>
            <el-select v-model="memberType" placeholder="会员类型">
              <el-option
                v-for="item in MemberTypevalue"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle1">通道:</span>
            <el-select
              v-model="channelType"
              placeholder="通道类型"
              @change="selectChannelType"
            >
              <el-option
                v-for="(item, index) in channelslist"
                :key="index"
                :label="item.options"
                :value="item.code"
              ></el-option>
            </el-select>
          </div>
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle">会员名称:</span
            ><el-input v-model="memberName" placeholder="请输入内容"></el-input>
          </div>
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle">会员昵称:</span
            ><el-input
              v-model="memberNickName"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle1">会员证件类型:</span>
            <el-select v-model="globalType" placeholder="会员类型">
              <el-option
                v-for="item in globalTypevalue"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle">会员证号码:</span
            ><el-input v-model="globalId" placeholder="请输入内容"></el-input>
          </div>
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle">手机号:</span
            ><el-input v-model="mobile" placeholder="请输入内容"></el-input>
          </div>
          <div class="WithdrawalStyle">
            <span class="WithdrawalWordStyle">邮箱:</span
            ><el-input v-model="email" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetElectronicMessage">取消</el-button>
          <el-button type="primary" @click="OpenElectronicLedger"
            >确定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getservice,
  merchantlist,
  APIElectronicAccountList,
  getBD,
  merchantexcel,
  getlabelTagList,
  getDimensionTagList,
  dictionarylist,
  APIElectronicAccountStatistics,
  APIOpenElectronicLedger,
  divideChannelList
} from "@/api/api";
import { acctpaymentPay , huifuUserBind} from '@/api/fetchApi'
export default {
  name: "baseform",
  data: function () {
    return {
      channelAcctNo:'',
      cashoutMerchantId:'',
      trsTotalBalance:'',
      bolStatus:false,
      bindMerchNoVisible:false,
      paymentForm:{
        acct_split_bunch:{
          acct_infos:[{}],
          percentage_flag:'N'
        },
        // acct_split_bunch:[{}],
        risk_check_data:{
          transfer_type:''
        },
      },
      reqData:{},
      receiverList:[],
      causeList:[ {value:'01',label:'卡券推广类'} , {value:'02',label:'卡券核销类'} , {value:'03',label:'消费'} , {value:'04',label:'工资代发'} , {value:'05',label:'分润'} , {value:'06',label:'灵活用工'}],
      paymentFormRules:{
        // /^(?!.*\..*\\.).*$/
        ord_amt:[{ required: true, message: '请输入支付金额', trigger: 'blur' },
        { required: true,validator:(rule , value , callback)=>{
             let num = 0
             this.paymentForm.acct_split_bunch.acct_infos.forEach((item,index)=>{
              num = num +  item.div_amt * 1
              if(this.paymentForm.acct_split_bunch.percentage_flag == 'N' && index == (this.paymentForm.acct_split_bunch.acct_infos.length - 1)){
                 if(num > this.paymentForm.ord_amt * 1){
                  callback(new Error(`支付金额小于分账金额，${num - this.paymentForm.ord_amt}元`))
                 }else{
                  callback()
                 }
            }
             })
        } }
        ],
        'risk_check_data.transfer_type':[{ required: true, message: '请选择支付原因', trigger: 'change' }],
        trans_fee_take_flag:[{ required: true, message: '请选择手续费承担方', trigger: 'change' }],
        servicePassword:[{ required: true, message: '请输入服务密码', trigger: 'blur' }],
         'acct_split_bunch.acct_infos':[{required: true,validator:(rule , value , callback)=>{
          let num = 0
          value.forEach((item,index)=>{
            if(this.paymentForm.acct_split_bunch.percentage_flag == 'Y'){
              num = num +  item.percentage_div * 1
              if(!item.percentage_div || !item.huifu_id){
                callback(new Error('请输入完整的分账商户信息！'))
              }else{
                if(index == (value.length - 1)){
                  if(num < 100){
                    callback(new Error(`剩余${100 - num}%未分账`))
                  }else{
                    this.bolStatus = true
                    callback()
                  }
                }
              }

            }else{
              num = num +  item.div_amt * 1
              if(!item.div_amt || !item.huifu_id){
                callback(new Error('请输入完整的分账商户信息！'))
              }else{
                if(index == (value.length - 1)){
                  if(num < this.paymentForm.ord_amt * 1){
                    callback(new Error(`剩余${(this.paymentForm.ord_amt - num).toFixed(2)}元未分账`))
                  }else{
                    callback()
                  }
                }
              }
            }
          })
         } }],
      },
      balancePaymentVisible:false,
      ActivateElectronicsFormVisible: false,
      merchantsinfo: "",
      MembershipNumber: "", //会员编号
      phoneNumber: "", //手机
      mailboxNumber: "", //邮箱
      ElectronicInquiryMerId: "", //商户号
      memKeyWords:'',
      mchNo: "",
      memberNo: "",
      withRate: "",
      withPer: "",
      channelName: "",
      channelType: "",
      channelId:'',
      channelAcctNo:'',
      memberName: "",
      memberNickName: "",
      globalId: "",
      mobile: "",
      email: "",
      bindUserForm:{
        mch_no:'',
        huifu_id:''
      },
      bindUserFormRules:{
        mch_no:[{ required: true, message: '请输入乐收赢商户号', trigger: 'blur' }],
        huifu_id:[{ required: true, message: '请输入汇付商户号', trigger: 'blur' }],
      },
      globalType: "", //证件类型

      memberType: "",
      globalTypevalue: [
        {
          value: "1",
          label: "身份证",
        },
        {
          value: "2",
          label: "军人军官证",
        },
        {
          value: "3",
          label: "港澳台居民通行证",
        },
        {
          value: "4",
          label: "中国护照",
        },
        {
          value: "5",
          label: "单位统一代码",
        },
        {
          value: "51",
          label: "法人代码证",
        },
        {
          value: "52",
          label: "组织机构代码证",
        },
        {
          value: "53",
          label: "政府机构/公共机构批文",
        },
        {
          value: "60",
          label: "香港商业登记证",
        },
        {
          value: "65",
          label: "事业单位登记证",
        },
        {
          value: "68",
          label: "营业执照",
        },
        {
          value: "73",
          label: "统一社会信用代码",
        },
      ],
      MemberTypevalue: [
        {
          value: "1",
          label: "普通账户",
        },
        {
          value: "2",
          label: "商户账户",
        },
      ],
      CardBindingStatus: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "未绑定",
        },
        {
          value: "1",
          label: "已绑定",
        },
        {
          value: "2",
          label: "待鉴权",
        },
      ],
      CardBindingStatusvalue: "1", //状态
      tarminal: {
        payLogo: "",
        shopName: "",
        marid: "",
      },
      WithdrawalBalance: "", //提现余额
      WithdrawalFormVisible: false, //提现弹窗显示
      channelType: "",
      exxxx: false,
      tableData: [],
      cur_page: 1,
      cur_size: 10,
      multipleSelection: [],
      visible: false,
      servicearr: [],
      merchantarr: [],
      combined: 10,
      pageCount: "",
      channelslist: [],
      huifuChannelslist:[],
      datainfo: {
        totalFee: "",
        fee: "",
        total: "",
        balance: "",
        agent1Profit: "",
        agent2Profit: "",
        bdProfit: "",
      },
      userinfo: "",
      date: "",
      loading: true,
      conditions: {
        servicelevel: "",
        servicename: "",
        stardate: "",
        enddate: "",
        serviceid: "",
        aisle: "",
        shopno: "",
        BDname: "",
        keywords: "",
      },
      dimension: "", //选择维度
      tagname: "", //标签名
      label_all: [], //标签模糊查询
      tagId: "",
      huifuId:'',
      pickerOptions: {
        // 设置不能超过未来时间
        // disabledDate: (time) => {
        //   // 设置可选择的日期为今天之后的一个月内
        //   const curDate = (new Date()).getTime()
        //   // 这里算出一个月的毫秒数,这里使用30的平均值,实际中应根据具体的每个月有多少天计算
        //   const day = 31 * 24 * 3600 * 1000
        //   const dateRegion = curDate - day
        //   return time.getTime() > Date.now() - 8.64e7 ||
        //   time.getTime() < dateRegion
        // }
        // 设置不能超过当天的23:59:59
        disabledDate(time) {
          let nowDate = new Date();
          let date = {
            year: nowDate.getFullYear(),
            month: nowDate.getMonth() + 1,
            date: nowDate.getDate(),
          };
          let timeDate =
            date.year + "-" + date.month + "-" + date.date + " 23:59:59";
          let times = new Date(timeDate).getTime();
          return time.getTime() > times;
        },
      },
    };
  },
  created() {
    this.dictionarylist();
    this.huifuDictionarylist()
    this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.$store.dispatch("getNewNum", 6);
    this.ElectronicAccountList();
    // if (this.userinfo.rolesId == 1) {
    //   this.conditions.servicelevel = 1;
    //   this.servicelevel("1");
    // }
    // if (this.userinfo.rolesId == 2) {
    //   this.conditions.servicelevel = 2;
    //   this.servicelevel("2");
    // } else
    if (this.userinfo.rolesId == 3) {
      this.getBD(this.userinfo.fid);
    }

    if (this.userinfo.rolesId == 5) {
      this.bindUserForm.mch_no =   JSON.parse(sessionStorage.getItem("userInfo")).username
    }
    
    // this.dimension_menu(5)
  },
  methods: {
    //跳转详情
    joinmerchantsinfo(val) {
      if(val.channelType == '16'){
        // console.log
        this.$router.push({
        path: "/detailMerchant?mid="+val.merchantId,
      });
      }else{
        this.$router.push({
        path: "/ElectronicAccountinfo",
      });
      sessionStorage.setItem("merchants_id", JSON.stringify(val.id));
      sessionStorage.setItem(
        "merchants_merchantName",
        JSON.stringify(val.merchantName)
      );
      }
      
    },
    editInfo(val){
      if(val.channelType == '16'){
        this.$router.push({
        path: "/editMerchant?mid="+val.merchantId+'&huifu_id='+val.channelAcctNo,
      });
      }
    },
    //选择开通电子账户选择通道
    selectChannelType(id) {
      let target = this.channelslist.filter((item) => item.id == id);
      this.channelName = target[0].options;
    },
    //重置
    resetElectronicMessage() {
      (this.ActivateElectronicsFormVisible = false),
        (this.mchNo = ""),
        (this.memberNo = ""),
        (this.withRate = ""),
        (this.withPer = ""),
        (this.channelName = ""),
        (this.channelType = ""),
        (this.memberName = ""),
        (this.memberNickName = ""),
        (this.globalId = ""),
        (this.mobile = ""),
        (this.email = ""),
        (this.globalType = ""), //证件类型
        (this.memberType = "");
    },

    //开通电子账户确定按钮
    OpenElectronicLedger() {
      let ElectronicLedger = {
        mchNo: this.mchNo,
        memberNo: this.memberNo,
        withRate: this.withRate + "%",
        withPer: this.withPer,
        memberType: this.memberType,
        channelName: this.channelName,
        channelType: this.channelType,
        memberName: this.memberName,
        memberNickName: this.memberNickName,
        globalType: this.globalType,
        globalId: this.globalId,
        mobile: this.mobile,
        email: this.email,
      };
      APIOpenElectronicLedger(ElectronicLedger).then((res) => {
        if (res.code == 200) {
          this.ElectronicAccountList();
          this.resetElectronicMessage();
          this.$message({
            message: "开通成功",
            type: "success",
          });
        } else if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.$message.error(res.message);
        }
      });
    },
    addAccount(){
      this.$router.push("/addMerchant");
    },
    //打开开通电子账户弹窗
    ActivateElectronics() {
      this.ActivateElectronicsFormVisible = true;
    },
    bindMerchNo(){
      this.bindMerchNoVisible = true
      setTimeout(()=>{
       this.$refs.bindUserForm.resetFields()
      })
    },
    async bindMerchNoClick(){
      // const mchNo =  
      const res = await huifuUserBind(this.bindUserForm) 
      if(res.code == 200){
        this.bindMerchNoVisible = false
        this.huifuId = ''
        this.$message.success('绑定成功!')
        this.ElectronicAccountList()
      }else{
        this.$message.error(res.message)
      }
    },
    // 汇付余额支付
   async  balancePaymentSuer(){
      if(this.bolStatus && this.paymentForm.ord_amt && this.paymentForm.risk_check_data.transfer_type && this.paymentForm.trans_fee_take_flag){
        this.initApiData()
        setTimeout(async()=>{
         const data = Object.assign({},this.paymentForm,this.reqData)
          const res = await acctpaymentPay({merchantId:this.cashoutMerchantId,data:JSON.stringify(data)})
          if(res.data.resp_code == '00000000'){
            this.$message.success('交易成功!')
            this.balancePaymentVisible = false
            this.cur_page = 1 
            this.ElectronicAccountList()
          }else{
            this.$message.error(res.data.resp_desc)
          }
        })
      }else{
        const valid = await this.$refs.paymentFormRules.validate()
      if(valid){
        this.initApiData()
        setTimeout(async()=>{
         const data = Object.assign({},this.paymentForm,this.reqData)
         console.log(this.cashoutMerchantId)
          const res = await acctpaymentPay({merchantId:this.cashoutMerchantId,data:JSON.stringify(data)})
          if(res.data.resp_code == '00000000'){
            this.$message.success('交易成功!')
            this.balancePaymentVisible = false
            this.cur_page = 1 
            this.ElectronicAccountList()
          }else{
            this.$message.error(res.data.resp_desc)
          }
        })
      }
      }
    },
    async balancePaymentDialog(v){
      this.cashoutMerchantId = v.merchantId
      // console.log(this.cashoutMerchantId)
      this.balancePaymentVisible = true
         this.paymentForm = {
        acct_split_bunch:{
          acct_infos:[{}],
          percentage_flag:'N'
        },
        // acct_split_bunch:[{}],
        risk_check_data:{
          transfer_type:''
        },
      }
      
      this.paymentForm.out_huifu_id = v.channelAcctNo
      this.trsTotalBalance = v.trsTotalBalance
      setTimeout(()=>{
        this.$refs.paymentFormRules.clearValidate()
      })
      const res =  await APIElectronicAccountList({page: 1,  size: 999,merchantName:this.tarminal.marid})
       const index = res.data.findIndex(item => !item.pid)
       res.data.splice(index, 1)
       this.receiverList = res.data
      

    },
    ordAmtBlur(){
      if(!this.paymentForm.ord_amt) return
      this.paymentForm.ord_amt = (this.paymentForm.ord_amt * 1).toFixed(2)
      console.log(this.paymentForm.ord_amt * 1 > this.trsTotalBalance)
       if(this.paymentForm.ord_amt * 1> this.trsTotalBalance * 1){
         this.$message.error('支付金额超出可支付金额！')
         this.paymentForm.ord_amt = (this.trsTotalBalance * 1).toFixed(2)
       }
      //  console.log(this.paymentForm.ord_amt , this.trsTotalBalance)
       this.$forceUpdate()
    },
    divAmtBlur(value,index){
      if(!this.paymentForm.acct_split_bunch.acct_infos[index].div_amt && !this.paymentForm.acct_split_bunch.acct_infos[index].percentage_div) return
      let num = 0
      if(this.paymentForm.acct_split_bunch.percentage_flag == 'N'){
        this.paymentForm.acct_split_bunch.acct_infos[index].div_amt = (this.paymentForm.acct_split_bunch.acct_infos[index].div_amt * 1).toFixed(2)
      }else{
        this.paymentForm.acct_split_bunch.acct_infos[index].percentage_div = (this.paymentForm.acct_split_bunch.acct_infos[index].percentage_div * 1).toFixed(2)
      }
      this.paymentForm.acct_split_bunch.acct_infos.forEach((item,arrIndex)=>{
        console.log(this.paymentForm.acct_split_bunch.percentage_flag)
        if(this.paymentForm.acct_split_bunch.percentage_flag == 'Y'){
           num = num  + item.percentage_div * 1
           if(num > 100 && arrIndex == (this.paymentForm.acct_split_bunch.acct_infos.length - 1)){
            this.$message.error('分账最大比例超过了100%')
            this.paymentForm.acct_split_bunch.acct_infos[index].percentage_div = (this.paymentForm.acct_split_bunch.acct_infos[index].percentage_div *1 - (num - 100)  ).toFixed(0)
           }
        }else{
          num = num + item.div_amt * 1 
          if(num > this.paymentForm.ord_amt && arrIndex == (this.paymentForm.acct_split_bunch.acct_infos.length - 1)){
            this.$message.error('分账最大值超过了支付金额')
            this.paymentForm.acct_split_bunch.acct_infos[index].div_amt =   (this.paymentForm.acct_split_bunch.acct_infos[index].div_amt - (num - this.paymentForm.ord_amt * 1)).toFixed(2)
           }
        }
      })
      this.$forceUpdate()
    },
    initApiData(){
        const now = new Date();
	      const year = now.getFullYear();
	      const month = (now.getMonth() + 1) < 10 ? '0' + (now.getMonth() + 1) : now.getMonth() 
	      const day = now.getDate() < 10 ? '0' + now.getDate() : now.getDate()
        this.reqData.req_seq_id  = now.getTime()
        this.reqData.req_date  = year + '' + month + '' + day
      },
    //模糊查询商户名
    searchMerchantsList(queryString, cb) {
      let sosolist = {};
      sosolist = {
        page: 1,
        size: 20,
        merchantName: this.tarminal.marid,
      };
      merchantlist(sosolist).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.merchantarrlist = [];
          for (var i = 0; i < res.data.length; i++) {
            this.merchantarrlist.push({
              value: res.data[i].merchantName + " — " + res.data[i].merchantNo,
              id: res.data[i].id,
            });
          }
          let results = queryString
            ? this.merchantarrlist.filter(this.createFilter(queryString))
            : this.merchantarrlist;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      });
    },
    getMerchantId(value) {
      if (value == "") {
        this.conditions.keywords = "";
      }
    },
    marid(item) {
      this.conditions.keywords = item.id;
      this.tarminal.shopName = "";
    },
    //提现
    withdrawalButton() {
      this.WithdrawalFormVisible = true;
    },
    // 跳转对账单
    joinbill() {
      this.$router.push("/bill");
    },
    // 获取所有通道type
    huifuDictionarylist() {
      divideChannelList({
        splitType: 1
      }).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.huifuChannelslist = res.data.rows;
        }
      });
    },

    // 获取所有通道type
    dictionarylist() {
      dictionarylist({
        type: "channelType",
        status: 0,
        sort: "sorted",
        order: "DESC",
      }).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.channelslist = res.data;
        }
      });
    },
    //修改thead 背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
      }
    },

    joininfo(val) {
      // console.log(val)
      this.$router.push({
        path: "/businessstatisticsinfo",
        query: {
          no: val,
          date: this.date,
          channelType: this.channelType,
        },
      });
    },
    // 刷新
    refresh() {
      this.$router.go({
        path: 0,
        query: {
          t: Date.now(),
        },
      });
    },
    renderheader(h, { column, $index }) {
      return h("span", {}, [
        h("span", {}, column.label.split("?")[0]),
        h("br"),
        h("span", {}, column.label.split("?")[1]),
      ]);
    },
    // 分页导航
    handleCurrentChange(val) {
      if (this.conditions.servicelevel == 1) {
        this.ElectronicAccountList("1");
      } else if (this.conditions.servicelevel == 2) {
        this.ElectronicAccountList("2");
      } else {
        this.ElectronicAccountList("2");
      }
      this.cur_page = val;
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    // 分页数量
    sizechange(val) {
      this.cur_size = val;
      if (this.conditions.servicelevel == 1) {
        this.ElectronicAccountList("1");
      } else if (this.conditions.servicelevel == 2) {
        this.ElectronicAccountList("2");
      } else {
        this.ElectronicAccountList("2");
      }

      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    //多选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //  重置
    reset() {
      this.date = "";
      (this.MembershipNumber = ""), //会员号
        (this.phoneNumber = ""), //手机
        (this.mailboxNumber = ""), //邮箱
        (this.ElectronicInquiryMerId = ""), //商户号
        (this.CardBindingStatusvalue = "1");
        this.memKeyWords = ''
        this.channelAcctNo = ''
      this.conditions.servicelevel = "";
      this.conditions.servicename = "";
      this.conditions.stardate = "";
      this.conditions.enddate = "";
      this.conditions.serviceid = "";
      this.wx1code = "";
      this.cur_page = 1;
      this.conditions.BDname = "";
      this.conditions.keywords = "";
      this.conditions.BDid = "";
      this.channelId = "";
      this.dimension = "";
      this.tagname = "";
      this.tagId = "";
      if (this.userinfo.rolesId == 2) {
        this.conditions.servicelevel = 2;
      }
    },
    addPaymentTableClcik(){
      this.paymentForm.acct_split_bunch.acct_infos.push({})
    },
    paymentdeletClick(index){
      this.paymentForm.acct_split_bunch.acct_infos.splice(index,1) 
    },
    // 业务经理
    BDname(queryString, cb) {
      let BDarr = this.BDarr;
      let results = queryString
        ? BDarr.filter(this.createFilter(queryString))
        : BDarr;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    BDid(item) {
      this.conditions.BDid = item.id;
    },
    serviceid(item) {
      this.conditions.serviceid = item.id;
      this.getBD(item.id);
    },
    getBD(id) {
      this.BDarr = [];
      getBD({ agentid: id }).then((res) => {
        for (var i = 0; i < res.data.rows.length; i++) {
          this.BDarr.push({
            value: res.data.rows[i].name,
            id: res.data.rows[i].id,
          });
        }
      });
    },
    // 搜索
    soso() {
      this.loading = true;
      this.cur_page = 1;
      if (!this.conditions.servicename) {
        this.conditions.serviceid = "";
      }
      if (!this.conditions.BDname) {
        this.conditions.BDid = "";
      }
      if (this.conditions.servicelevel == 1) {
        this.ElectronicAccountList("1");
      } else if (this.conditions.servicelevel == 2) {
        this.ElectronicAccountList("2");
      } else {
        this.ElectronicAccountList("2");
      }
    },
    // 服务商名称
    querySearch(queryString, cb) {
      let sosolist = {};
      sosolist = {
        page: 1,
        size: 20,
        type: this.conditions.servicelevel,
        keywords: this.conditions.servicename,
      };
      getservice(sosolist).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.servicearr = [];
          for (var i = 0; i < res.data.rows.length; i++) {
            this.servicearr.push({
              value: res.data.rows[i].agentname,
              id: res.data.rows[i].id,
            });
          }
          let results = queryString
            ? this.servicearr.filter(this.createFilter(queryString))
            : this.servicearr;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      });
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !==
          -1
        );
      };
    },
    // 服务商级别
    servicelevel(val) {
      this.servicearr = [];
      getservice({
        type: val,
      }).then((res) => {
        for (var i = 0; i < res.data.rows.length; i++) {
          this.servicearr.push({
            value: res.data.rows[i].agentname,
            id: res.data.rows[i].id,
          });
        }
      });
    },

    // 商户交易统计
    ElectronicAccountList(level) {
      let sosolist = {};
      if (level == 1) {
        sosolist = {
          page: this.cur_page,
          size: this.cur_size,
          mobile: this.phoneNumber,
          channelAcctNo:this.channelAcctNo,
          email: this.mailboxNumber,
          merKeyWords: this.ElectronicInquiryMerId,
          status: this.CardBindingStatusvalue,
          memKeyWords: this.memKeyWords,
          // mchNo:this.conditions.keywords,
          agent1Id: this.conditions.serviceid,
          startTime: this.date[0],
          finishTime: this.date[1],
          // keywords: this.conditions.keywords,
          bdId: this.conditions.BDid,
          channelId: this.channelId,
          // tagId: this.tagId,
        };
      } else if (level == 2) {
        sosolist = {
          page: this.cur_page,
          size: this.cur_size,
          mobile: this.phoneNumber,
          channelAcctNo:this.channelAcctNo,
          email: this.mailboxNumber,
          merKeyWords: this.ElectronicInquiryMerId,
          mermberNo:this.mermberNo,
          status: this.CardBindingStatusvalue,
          memKeyWords: this.memKeyWords,
          // mchNo:this.conditions.keywords,
          agent2Id: this.conditions.serviceid,
          startTime: this.date[0],
          finishTime: this.date[1],
          // keywords: this.conditions.keywords,
          bdId: this.conditions.BDid,
          channelId: this.channelId,
          // tagId: this.tagId,
        };
      }else{
        sosolist = {
          page: this.cur_page,
          size: this.cur_size,
          status: this.CardBindingStatusvalue,
          // tagId: this.tagId,
        };
      }
      APIElectronicAccountList(sosolist).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.merchantarr = res.data;
          // this.datainfo = res.data;
          this.combined = res.pageInfo.recordCount;
          this.pageCount = res.pageInfo.pageCount;
          this.loading = false;
        } else if (res.code == 500) {
          this.$message.error(res.message);
        }
      });

      APIElectronicAccountStatistics(sosolist).then((res) => {
        // console.log(res);
        this.merchantsinfo = res.data;
      });
    },
    //维度查询标签
    dimension_menu(v) {
      this.label_all = [];
      getDimensionTagList({
        roleId: v,
      }).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          for (var i = 0; i < res.data.length; i++) {
            this.label_all.push({
              value: res.data[i].tagName,
              id: res.data[i].tagId,
            });
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //标签模糊
    querySearch_tag(queryString, cb) {
      // let servicearr = this.label_all;
      // let results = queryString
      //   ? servicearr.filter(this.createFilter(queryString))
      //   : servicearr;
      // // 调用 callback 返回建议列表的数据
      // cb(results);
      let that = this;
      getDimensionTagList({
        roleId: 5,
        tagwords: this.tagname,
      }).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          that.$router.push("/login");
        } else if (res.code == 200) {
          that.label_all = [];
          for (var i = 0; i < res.data.length; i++) {
            that.label_all.push({
              value: res.data[i].tagName,
              id: res.data[i].tagId,
            });
          }
          let servicearr = that.label_all;
          let results = queryString
            ? servicearr.filter(that.createFilter(queryString))
            : servicearr;
          // 调用 callback 返回建议列表的数据
          cb(results);
        } else {
          that.$message.error(res.message);
        }
      });
    },
    serviceid_tag(item) {
      this.tagId = item.id;
    },
  },
};
</script>
<style scoped lang='less'>
.WithdrawalWordStyle1 {
  line-height: 32px;
  width: 19%;
  text-align: right;
  margin-right: 10px;
}
.WithdrawalWordStyle3 {
  width: 200px;
}
.WithdrawalWordStyle4 {
  line-height: 32px;
  width: 19%;
  text-align: right;
  margin-right: 10px;
}
.merId {
  width: 250px;
}
.widthFrom {
  font-size: 16px;
}
.WithdrawalStyle {
  padding-top: 10px;
  font-weight: 500;
  display: flex;
  white-space: nowrap;
}
.widthdralValueStyle {
  line-height: 32px;
}
.WithdrawalWordStyle {
  line-height: 32px;
  width: 24%;
  text-align: right;
  margin-right: 10px;
}
// .WithdrawalWordStyle2{
//   width: 184px;
// }
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
 .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.tableBox {
  margin-top: 20px;
}
.servicename {
  width: 43%;
}
.servicename1 {
  width: 60%;
}
.servicelevel {
  width: 23.5%;
}
.width20 {
  width: 20%;
}
.red {
  color: #f9607d;
}
.blue {
  color: #01aaef;
}
.stitle {
  padding: 5px 0;
  font-size: 18px;
}
.statistical {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #00152a;
  color: #fff;
  padding: 12px;
  box-sizing: border-box;
  .statisticalitem {
    flex: 1;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.445);
    font-size: 13px;
    line-height: 180%;
    &:nth-last-child(1) {
      border-right: none;
    }
    .red {
      color: #f9607d;
      font-size: 18px;
    }
    .blue {
      color: #01aaef;
      font-size: 18px;
    }
  }
}
.green{
    background: #97c05c;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
.hui {
  background: #888888;
  color: #fff;
  padding: 0 5px;
  border-radius: 10px;
}
// ::v-deep .el-table__row > ::v-deep .el-input-group__append{

// }
::v-deep .divide{
  background-color: #409eff !important;
  color: #fff !important;
  border:none !important;
}
.huifu-select {
::v-deep  .el-select-dropdown__item{
  height: 60px !important;
}
}
// .BDname{
//   width: 20%;
// }
</style>